<template>
  <div class="lm-add-message">
    <el-container class="el-container">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="140px"
      >
        <el-form-item label="患者当前诊所">
          <el-col class="form-item">北京中宜和门诊</el-col>
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="form.patientName"></el-input>
        </el-form-item>
        <el-form-item label="患者性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio
              v-for="item in dict.gender"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthDay">
          <el-date-picker
            v-model="form.birthDay"
            type="date"
            value-format="timestamp"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="患者依从性预测">
          <el-radio-group v-model="form.compliance">
            <el-radio
              v-for="item in dict.patient_compliance"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 此处男女展示信息不同 -->
        <template v-if="form.gender == 'M'">
          <el-form-item label="身高增长">
            <el-radio-group v-model="form.hightGrow">
              <el-radio
                v-for="item in dict.hight_grow"
                :key="item.value"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="胡须">
            <el-radio-group v-model="form.beard">
              <el-radio
                v-for="item in dict.beard"
                :key="item.value"
                :label="item.value"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="喉结">
            <el-radio-group v-model="form.adamsApple">
              <el-radio
                v-for="item in dict.adams_apple"
                :key="item.value"
                :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else-if="form.gender == 'F'">
          <el-form-item label="女性月经">
            <el-radio-group v-model="form.period">
              <el-radio
                v-for="item in dict.period"
                :key="item.value"
                :label="item.value"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="初潮时间">
            <el-input v-model="form.firstPeriod"></el-input>
          </el-form-item>
        </template>
        <el-form-item label="家长姓名">
          <el-input v-model="form.parent"></el-input>
        </el-form-item>
        <el-form-item label="家长关系">
          <el-select v-model="form.relationship">
            <el-option
              v-for="item in dict.patient_parent_rel"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家长职业">
          <el-input v-model="form.parentProfession"></el-input>
        </el-form-item>
        <el-form-item label="家长联系方式">
          <el-input v-model="form.parentMobile"></el-input>
        </el-form-item>
        <el-form-item label="家长正畸史">
          <el-input v-model="form.orthodonticHis"></el-input>
        </el-form-item>
      </el-form>
      <el-aside width="300px" class="el-side">
        <el-row>
          <img src="@/assets/icons/svg/heaPortrait.png" alt="" class="headPortrait" />
        </el-row>
        <el-row>
          <el-button round class="btn">上传头像</el-button>
        </el-row>
        <el-row>
          <p>推荐1:1方形图，JPG/PNG格式，5M以内</p>
        </el-row>
      </el-aside>
    </el-container>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="crud.cancelCU">取消</el-button>
      <el-button
        :loading="crud.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >确认</el-button>
    </div> -->
  </div>
</template>
<script>
const defaultForm = {
  id: null,
  patientName: null,
  gender: null,
  birthDay: null,
  compliance: null,
  hightGrow: null,
  adamsApple: null,
  period: null,
  firstPeriod: null,
  parent: null,
  relationship: null,
  parentProfession: null,
  parentMobile: null,
  orthodonticHis: null
};
import { form, crud } from '@crud/crud';
export default {
  name: 'Message',
  mixins: [form(defaultForm), crud()],
  dicts: [
    'gender',
    'patient_compliance',
    'hight_grow',
    'beard',
    'adams_apple',
    'period',
    'patient_parent_rel'
  ],
  data() {
    return {
      time: '',
      rules: {
        patientName: [
          { required: true, message: '请输入患者名称', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择患者性别', trigger: 'blur' }
        ],
        birthDay: [
          { required: true, message: '请输入出生日期', trigger: 'blur' }
        ]
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.lm-add-message{
  padding: 0px 20px 10px;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  .el-form{
    width: 100%;
    margin-top:50px;
    .el-form-item{
      width: 500px;
      height: 42px;
    }
  }
  .icon{
    height: 18px;
    width: 18px;
    margin:0 10px 0 20px;
    vertical-align: middle;
  }
  .reg-text{
    line-height: 26px;
    color: #EA5F5F;
    vertical-align: middle;
  }

  .el-radio-group{
    width: 600px;
  }
  .man{
    margin-right: 52px;
  }

  // .form-item{
  //   display: inline-block!important;
  //   width: 500px!important;
  // }
  // .el-date-editor{
  //   display: inline-block!important;
  //   width: 500px!important;
  // }

  .el-aside{
    background: #ffffff;
  }
  .headPortrait{
    height: 160px;
    width: 160px;
    margin-top: 50px;
  }
  .btn{
    width: 120px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #508FCC;
    font-size: 18px;
    color: #508FCC;
  }
  .el-side div{
    text-align: center;
  }
  .el-side p{
    line-height: 22px;
    color: #666666;
    font-size: 12px;
  }
  .bot-bar{
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.operPatientEdit {
  .el-input,
  .el-select {
    width: 300px;
  }
}
</style>
